<h1 mat-dialog-title>Configurator for node {{ name }}</h1>

<div class="modal-form-container">
  <div class="content">
    <div class="default-content">
      <mat-card class="matCard">
        <mat-tab-group *ngIf="name">
          <mat-tab label="Ethernet interfaces">
            <div class="form-field" *ngFor="let port of portsMappingEthernet">
              <div class="form-field">{{ port.name }}</div>
              <br /><br />
            </div>
            <mat-form-field class="select">
              <mat-select
                placeholder="Ethernet interface"
                [ngModelOptions]="{ standalone: true }"
                [(ngModel)]="ethernetInterface"
              >
                <mat-option *ngFor="let type of ethernetInterfaces" [value]="type">
                  {{ type }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <button mat-button class="form-field" (click)="onAddEthernetInterface()">Add</button>
          </mat-tab>

          <mat-tab label="TAP interfaces">
            <div class="form-field" *ngFor="let port of portsMappingTap">
              <div class="form-field">{{ port.name }}</div>
              <br /><br />
            </div>
            <mat-form-field class="form-field">
              <input matInput type="text" [(ngModel)]="tapInterface" placeholder="TAP interface" />
            </mat-form-field>
            <button mat-button class="form-field" (click)="onAddTapInterface()">Add</button>
          </mat-tab>

          <mat-tab label="UDP tunnels">
            <app-udp-tunnels #udpTunnels [dataSourceUdp]="portsMappingUdp"></app-udp-tunnels>
          </mat-tab>

          <mat-tab label="Miscellaneous">
            <form [formGroup]="generalSettingsForm">
              <mat-form-field class="form-field">
                <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
              </mat-form-field>
            </form>
            <mat-form-field class="select">
              <mat-select placeholder="Console type" [(ngModel)]="node.console_type">
                <mat-option *ngFor="let type of consoleTypes" [value]="type">
                  {{ type }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field class="form-field">
              <input
                matInput
                type="text"
                [(ngModel)]="node.properties.remote_console_host"
                placeholder="Console host"
              />
            </mat-form-field>
            <mat-form-field class="form-field">
              <input
                matInput
                type="text"
                [(ngModel)]="node.properties.remote_console_port"
                placeholder="Console port"
              />
            </mat-form-field>
            <mat-form-field class="form-field">
              <input
                matInput
                type="text"
                [(ngModel)]="node.properties.remote_console_http_path"
                placeholder="Console HTTP path"
              />
            </mat-form-field>
          </mat-tab>
        </mat-tab-group>
      </mat-card>
    </div>
  </div>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
